Immediate Mode 
Graphical User Interfaces 


Presented by 
Rickard Gustafsson 
Johannes Algelind 


Traditional method 


e Retained Mode Graphical User Interfaces 
— Uses Model View Controller 
— All your data lives in the GUI library 


e You must copy your data back and forth between 
application and library (position, size, text, ...) 


— Communicate with your widgets using ID's or 
objects 


— Big library with lot's of classes and code. 


Why do we want a new way of doing 
GUIs? 


e Retained mode is a pain 


— Message Queue / Callbacks 
— 1D's / Objects 
— Decentralized linkage 


— Synchronization between GUI library and 
application (inherently because of MVC) 
— Data-driven 


— Adding custom widgets is tricky 


Typical RMGUI usage example 


WidgetSet* ws; 

const unsigned int ID_ BUTTON = 1; 
const unsigned int ID_SLIDER = 2; 
float my_float = 0.5f; 


void init() 

( 
ws = new WidgetSet(); 
ws->add(create_button(ID_BUTTON, "Click me", ...)); 
ws->add(create_slider_float(ID_SLIDER, "Slide me", 0.f, 1.f, ...)); 
ws->set_float_value(ID_SLIDER, my_float); 
ws->set_callback(8callback_ws); 


void callback_ws(int widget_id) 


( 
switch(widget_id) 


( 
case ID_ BUTTON: do_action(); break; 
case ID_ SLIDER: my_float = ws->get_float_value(ID_SLIDER); break; 
) 
) 
void main() 
init(); 
while(running) 
ws->draw(); 


Immediate Mode GUI 


e Casey Muratori stumbled upon IMGUI around 
2002 while working at RAD Game Tools. 


e Astyle of doing GUIs which are well suited for 
real-time rendered applications. 


e Zero Memory Widgets — IMGUI library for 
regular applications, appeared around 2003. 


IMGUI usage example 


void draw_gui(struct GUlState_t* state, float* my_float) 


( 
if (do_button(state, "Click me*, ...)) 
do_action(); 
do_slider_float(state, "Slide me", my_float, 0.f, 1.f, ...); 
) 
void main() 
( 


GUIState_1t* state; 
float my_float = 0.5f; 
while(running) 
( 
update(state, ...); 
draw_gui(state, 4¿my_float); 


IMGUI tralts 


No data synchronization needed, all your data 
is stored in the application. 


Stores very little state in the library 

Uses procedural function-calls as “widgets”. 
Code-driven 

Centralized flow control 

Easy to dive in to, easy to extend. 

Must be redrawn every frame 


Simple IMGUI implementation 


Basic concepts 


— A widget is concidered ”hot” if there is a 
possibility that it will be interacted with. 

— An “active” widget is currently engaged by the 
user. 


— Widget 1D's are used for the library to keep track 
of hot and active widgets. 


Simple IMGUI implementation contd. 


e CUistaios bool do_button(GUlState_t* state, void* id, Rect_t* rect, const char* text, ...) 
( = ( 
void* hot_item; 
void* active_¡tem; 
int mouse_x, mouse y; if (inside) 
unsigned mouse_buttons; 


bool result = false 
bool inside = mouse_inside_rect(state, rect); 


state->hot_item = ld; 


la 
if(state->active_item == id 88 lis _button_down(1) 
struct Rect_t ( 
( if (inside) 
float x, y, w, h; ( 
y result = true; 


bool is_button_down(GUIState_t* state, unsigned button) state->hot_item = id; 


( ) 
return (state->»mouse_buttons >> button-1) 8 1; 2158 
state->hot_item = 0; 


state->active_ item = 0; 

bool mouse_ inside _rect(GUlState_t* state, Rect_t* rect) ) 

[/* point-in-rect-test */ ) else if (state->hot_item == id) 

( . . 

void update(GUIState_t* state, unsigned mb, if (is_button_down(1)) 

int mx, int my) ( 

( state->focused_ item = id; 
state->M0USse_x = mx; state->active_ item = id; 
state->mouse_y = my; ) 
state->mouse_buttons = mb; ) 

) draw_button(rect, text, ...); 


return result; 


Demo-time 


IMGUI in Teeworlds 


Internet LAN Favorites Demos Settings Quit 


Name Type Map Players (Biñgl Filter Info 
(SWE) CTF CTF  ctf2 3/16 21 

*gv* - ctf ctf2 16/16 Has people playing 
TinyBox.net ctf2 4/16 Server not full 
[BiZzaro]ictf ctf2 0/16 
CTF Server by GameMods. org ctf2 0/10 
AA E (TS 
TieBones TeeWorld DM 2/16 
KirovNet.CTF Teeworlds Server CTF 0/12 5 Xx Standard map 
-CyberPain Teeworld CTF Server- CTF 0/16 Game types: E 
e66b_tw_server DM 2/16 

GameZoo.it CTF CTF 0/12 

set sail for fail CTF DM 0/16 

MegaStyle TW CTF CTF 1/12 

Gagarino.NET CTF CTF 0/16 

Phonix /1/ by ZockerStube.net CTF 0/16 

bloodarmy.ru TW CTF CTF 0/16 96 

Games-by.net Teeworlds sample ctf CTF 0/8 113 
teeworlds.raspi.fi CTF 0/16 124 

GG.ST HS ctf server CTF 0/16 130 

*gV* - cKz Clanserver CTF 6/16 130 

CoCoS [RUS] Teeworlds CTF CTF 0/8 134 

ROSTOV dm DM 0/12 135 

srsgames.net | teamplay | vanilla | CTF. CTF 0/16 142 

6on6 BattleTees +41 (Qi Clanserver) CTF 2/16 145 

[Qi] High level only (pass= qiRox) CTF 0/16 148 l yr 
EFS-Teeworlds-Server CTF 0/12 162 lo Reset Filter 
AB | Public Server | 24/7 CTF 0/16 166 Hostáddress" 


Quick search: 28 of 679 servers, 36 players f 


No password 
yx Compatible Version 


x. Standard gametype 


Current version: 0.5.1 “Refresh 
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File Edit Assets GameObject Component Terrain Window Help 


4] S/50] [=acenter | ourivo: MEN 


“= Hierarchy H+Scene , € Game 
FPS Textured  +| | RGB 
»- AllSeagulls 


Daylight Water 
Directional Back light 
Directional Sun light 
Y First Person Controller Prefab 
Graphics 
Main Camera 
HeronColliders 
» HeronPrefab 
» HeronPrefab 
» LevelObjects 
Performance 
SeaFloor 


v 


UnderWater Water Surface 
y Waves 
noMansLandFoam 
mainislandFoam 
secondarylslandFoam 
fx Project 
Create * 
Y grin 
» ipallFish 
FEfishSheet 
» Materials 
y CSPivotObjects 
BllalicountryLights 
» ¡fbarrel 
»-  highWayLightPost 
» [Materials 


Á 


Scene 


iigredBarrelTGA 
»- [1 smallCrate 
W yawcTGA 
O glassbump 
islands 
|] LightFlash 
ALightmapPSD 
ÉdLightmapWithFog 
b E3LongBoat_NC_Untied 
»- [Materials 
Ly new prefab 
w % New Terrain 
- SplatAlpha O 
Báltightmap 
SplatAlpha 1 
» ESPivot 
»- Pro Standard Assets 
» Scripts 
¡> GiseaFoamCoast 


Textured + Overdraw + . a 


| Scene 
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| Layers ” ] [ Layout ” ] 
6 Inspector | 
(Y Terrain 
Tag | Untagged +) Layer | Default 5 
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Terrain (Script) 
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Paint Texture 
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He Edit Textures 


Settings 
+= Brush Size ——Q 25 
| Opacity Qro 10.5 
Target Strength O! 
> [3 Terrain Collider 2 
v |) [Y Water Lightmap Fog (Script) El *, 
Script [A waterLightmapFoc” 
Fog Density 0.013 
Fog Color eS 
Base Color eS 
Base Mult Blur Pixels 4 
Blur Over Drive 0 
Depth Ambient 2.5 


b-Terrain Size 
Terrain Collider 
Texture 


[ATerrain (Terrain C-* 
fALightmapPSD " 


What's next? 


e Partitioned IMGUI (”PIMGU!l”) 


Sources € more info 


”Immediate Mode GUIs” written by Sean 
Barret for GDM Sept. 2005. 


Introduction video by Casey Muratori 
The Molly Rocket forums 

Book in progress by Johannes Norneby 
Tutorial by Jari Komppa 

IMGUI implementation by nVidia 

Zero Memory Widgets 


Questions? 


